<template>
    <Header></Header>
    <!-- 主内容区域 -->
    <main class="container max-w-screen-xl mx-auto p-4 px-6">

        <!-- grid 表格布局，分为 4 列 -->
        <div class="grid grid-cols-8 gap-7">
            <!-- 中间栏，占用 4 列 -->
            <div class="col-span-8 md:col-span-6 mb-3">

                <!-- 手机目录 -->
                <div class="inline md:hidden z-10 fixed top-1/2 end-0 rotate-90">
                    <div @click="drawer = true">
                        <svg-icon name="expansion" class="w-10 h-10 cursor-pointer"></svg-icon>
                    </div>
                </div>
                <el-drawer v-model="drawer" :destroy-on-close="true" :with-header="false" size="75%">

                    <WikiToc :isShowToc="showToc">
                        <Toc v-if=showToc></Toc>
                    </WikiToc>

                </el-drawer>

                <!-- 文章卡片父容器 -->
                <div
                    class="w-full p-5 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-stone-950 dark:border-gray-700">
                    <!-- 面包屑 -->
                    <nav class="flex text-gray-400" aria-label="Breadcrumb">
                        <ol class="inline-flex items-center space-x-1 md:space-x-3">
                            <li class="inline-flex items-center">
                                <a href="#"
                                    class="inline-flex items-center text-sm font-medium hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
                                    <svg-icon name="f-home" class="w-3 h-3 mr-2.5" aria-hidden="true"></svg-icon>
                                    首页
                                </a>
                            </li>
                            <li>
                                <div class="flex items-center">
                                    /
                                    <a href="#"
                                        class="ml-1 text-sm font-medium md:ml-3 dark:text-gray-400 dark:hover:text-white">正文</a>
                                </div>
                            </li>
                        </ol>
                    </nav>
                    <!-- 文章 -->
                    <article>

                        <!-- 文章标题 -->
                        <h1 class="mt-4 font-bold text-3xl">{{ article.title }}</h1>

                        <!-- Meta 信息 -->
                        <div class="flex gap-3 md:gap-6 text-gray-400 items-center text-sm mt-1">

                            <!-- 发布时间 -->
                            <span class="mr-1 hidden md:inline">{{ article.newTime }}</span>

                            <!-- 文章总字数 -->
                            <div class="flex items-center" data-tooltip-target="word-tooltip-bottom"
                                data-tooltip-placement="bottom">
                                <svg-icon name="words" class="w-4 h-4 mr-1 icon"></svg-icon>
                                {{ article.totalWords }}
                            </div>
                            <!-- 文章字数 Tooltip -->
                            <div id="word-tooltip-bottom" role="tooltip"
                                class="absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded shadow-sm opacity-0 tooltip dark:bg-gray-700">
                                文章总字数
                                <div class="tooltip-arrow" data-popper-arrow></div>
                            </div>

                            <!-- 预计阅读时长 -->
                            <div class="hidden md:block">
                                <div class="flex items-center" data-tooltip-target="read-time-tooltip-bottom"
                                    data-tooltip-placement="bottom">
                                    <svg-icon name="times" class="w-4 h-4 mr-1.5 icon"></svg-icon>
                                    {{ article.readTime }}
                                </div>
                                <!-- 阅读时长 Tooltip -->
                                <div id="read-time-tooltip-bottom" role="tooltip"
                                    class="absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded shadow-sm opacity-0 tooltip dark:bg-gray-700">
                                    预计阅读时长
                                    <div class="tooltip-arrow" data-popper-arrow></div>
                                </div>

                            </div>
                            <!-- 阅读次数 -->
                            <div class="mr-1 hidden md:inline">
                                <div class="flex items-center" data-tooltip-target="read-times-tooltip-bottom">
                                    <svg-icon name="hot" class="w-4 h-4 mr-1.5 icon"></svg-icon>
                                    {{ article.readNum }}
                                </div>
                                <!--阅读次数 -->
                                <div id="read-times-tooltip-bottom" role="tooltip"
                                    class="absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded shadow-sm opacity-0 tooltip dark:bg-gray-700">
                                    阅读次数
                                    <div class="tooltip-arrow" data-popper-arrow></div>
                                </div>

                            </div>
                            <!-- 分类 -->
                            <div class="flex items-center">
                                <svg-icon name="f-collection" class="w-4 h-4 mr-1 icon" />
                                <a @click="goCategoryArticleListPage(article.categoryId, article.categoryName)"
                                    class="cursor-pointer mr-1 hover:underline">{{ article.categoryName }}</a>
                            </div>
                        </div>

                        <!-- 标签集合 -->
                        <div v-if="article.tags && article.tags.length > 0" class="mt-1">
                            <span @click="goTagArticleListPage(tag.id, tag.name)"
                                v-for="( tag, index ) in  article.tags " :key="index"
                                class="inline-block mb-1 cursor-pointer bg-green-100 text-green-800 text-xs font-medium mr-2 px-3 py-1 rounded-full hover:bg-green-200 hover:text-green-900 dark:bg-green-900 dark:text-green-300">
                                # {{ tag.name }}
                            </span>
                        </div>
                    </article>
                    <!-- 正文 -->
                    <MdPreview :editorId="articleEditorId" :model-value="article.content" :show-code-row-number="true"
                        @onGetCatalog="onGetCatalog" :theme="articleEditorTheme" />


                    <!-- 上下篇 -->
                    <nav class="flex flex-row mt-7">
                        <!-- basis-1/2 用于占用 flex 布局的一半空间 -->
                        <div class="basis-1/2">
                            <!-- h-full 指定高度占满 -->
                            <a v-if="preNext && preNext.preArticle"
                                @click="goWikiArticleDetailPage(preNext.preArticle.articleId)"
                                class="cursor-pointer flex flex-col h-full p-4 mr-3 text-base font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:border-blue-500 hover:bg-gray-100 hover:text-gray-700 dark:bg-stone-950 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                                <div>
                                    <svg-icon name="f-pre-page" class="inline w-3.5 h-3.5 ml-2 mb-1"
                                        aria-hidden="true"></svg-icon>
                                    上一篇
                                </div>
                                <div v-html="preNext.preArticle.articleTitle"></div>
                            </a>
                        </div>

                        <div class="basis-1/2">
                            <!-- text-right 指定文字居右显示 -->
                            <a v-if="preNext && preNext.nextArticle"
                                @click="goWikiArticleDetailPage(preNext.nextArticle.articleId)"
                                class="cursor-pointer flex flex-col h-full text-right p-4 text-base font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:border-blue-500 hover:bg-gray-100 hover:text-gray-700 dark:bg-stone-950 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                                <div>
                                    下一篇
                                    <svg-icon name="f-next-page" class="inline w-3.5 h-3.5 ml-2 mb-1"
                                        aria-hidden="true"></svg-icon>
                                </div>
                                <div v-html="preNext.nextArticle.articleTitle"></div>
                            </a>
                        </div>
                    </nav>
                    <!-- 评论组件 -->
                    <Comment></Comment>
                </div>
            </div>

            <!-- 右边侧边栏，占用一列 -->
            <aside
                class="hidden md:inline col-span-8 md:col-span-2  sticky top-[5rem] max-h-screen w-full p-5 bg-white border border-gray-200 rounded-lg dark:bg-stone-950 dark:border-gray-700">
                <!-- 电脑端目录 -->

                <WikiToc :isShowToc="showToc">
                    <Toc v-if=showToc></Toc>
                </WikiToc>

            </aside>
        </div>
    </main>
    <!-- 返回顶部 -->
    <ScrollToTopButton></ScrollToTopButton>
    <Footer></Footer>

</template>

<script setup>
import Header from '@/layouts/frontend/components/Header.vue'
import Footer from '@/layouts/frontend/components/Footer.vue'
import { useRoute, useRouter } from 'vue-router'
import { getArticleDetail } from '@/api/frontend/article'
import { ref, watch, onMounted } from 'vue'
import ScrollToTopButton from '@/layouts/frontend/components/ScrollToTopButton.vue'
import { MdPreview } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import Toc from '@/layouts/frontend/components/Toc2.vue'
import { useDark } from '@vueuse/core'
import { getWikiArticlePreNext } from '@/api/frontend/wiki'
import Comment from '@/components/Comment.vue'
import WikiToc from '@/layouts/frontend/components/WikiToc.vue'

const route = useRoute()
const router = useRouter()
// 上下页
const preNext = ref(null)

// 文章数据
const article = ref({})
const articleEditorId = "articleContent"
const isDark = useDark()

let articleEditorTheme = ref(isDark.value ? 'dark' : 'light')
// 当isDark变化时，更新articleEditorTheme
watch(isDark, () => {
    articleEditorTheme.value = isDark.value ? 'dark' : 'light'
})


// 获取文章详情
function refreshArticleDetail(articleId) {
    if (!articleId) {
        // 该知识库下暂未添加文章
        return
    }

    getArticleDetail(articleId).then((res) => {
        // 该文章不存在(错误码为 20021)
        if (!res.success && res.errorCode == '20021') {
            // 手动跳转 404 页面
            router.push({ name: 'NotFound' })
            return
        }
        article.value = res.data
        document.title = res.data.title + ' - ' + document.title
    })

    // 上下页
    getWikiArticlePreNext({ id: route.params.wikiId, articleId: articleId }).then(res => {
        if (res.success) {
            preNext.value = res.data
        }
    })
}

// 跳转文章详情页
const goWikiArticleDetailPage = (articleId) => {
    router.push({ path: '/wiki/' + route.params.wikiId, query: { articleId } })
}

refreshArticleDetail(route.query.articleId)


const showToc = ref(true)

onMounted(() => {

})

//监听目录事件，md-editor-v3提供
const onGetCatalog = (list) => {
    console.log(list.length)
    if (list.length > 0) {
        showToc.value = true
    } else {
        showToc.value = false
    }
}

// 监听路由
watch(route, (newRoute, oldRoute) => {
    // 重新渲染文章详情
    refreshArticleDetail(newRoute.query.articleId)
})

// 手机端控制
const drawer = ref(false)

</script>

<style scoped>
::v-deep(.el-button) {
    width: 50px;
    height: 50px;
}

.max-h-screen {
    max-height: 85vh;
}


.overflow-y-auto {
    overflow-x: hidden;
}

/* 滚动条整体样式 */
::-webkit-scrollbar {

    width: 2px;
    /* 设置滚动条宽度 */
}

/* 鼠标悬停时滚动条变粗 */
:hover ::-webkit-scrollbar {
    width: 8px;
    /* 设置滚动条宽度 */
}

/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
    border-radius: 5px;
    /* 设置滑块的圆角 */
    background: rgba(62, 14, 174, 0.2);
    /* 设置滑块的背景颜色 */
}


/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
    border-radius: 0;
    /* 设置轨道的圆角 */
    background: rgba(0, 0, 0, 0.1);
    /* 设置轨道的背景颜色 */
}
</style>